<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true">
      <el-form-item label="标准名称" >
        <el-input
          v-model="queryParams.standardName"
          placeholder="请输入标准名称"
          clearable
          size="small"
        />
      </el-form-item>
      <el-form-item label="标准编号" >
        <el-input
          v-model="queryParams.standardCoder"
          placeholder="请输入标准编号"
          clearable
          size="small"
        />
      </el-form-item>
      <el-form-item label="标准类型" >
        <el-select
          v-model="queryParams.standardType"
          clearable
          size="small"
        >
          <el-option
            v-for="dict in statusOptions"
            :key="dict.dictValue"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="queryParams.pageNum=1;getList();">搜索</el-button>
        <el-button type="success" icon="el-icon-plus" size="mini" @click="cgjhadd">添加</el-button>
        <el-button size="mini" type="info" icon="el-icon-upload">导入</el-button>
        <el-button size="mini" type="warning" icon="el-icon-download" @click="handleExport">导出</el-button>
        
      </el-form-item>
    </el-form>
    <el-table v-loading="loading" :data="roleList" stripe >
      <el-table-column align="center" type="index" label="序号"  width="55"  />
      <el-table-column align="center" label="标准编号" property="standardCoder"  >
        <template slot-scope="scope" style="text-align: center">
          <span style="color: #2196F3;cursor: pointer" @click="xingqing(scope.row)">{{scope.row.standardCoder}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="标准名称"   property="standardName" :show-overflow-tooltip="true"  ></el-table-column>
      <el-table-column align="center" label="适用公司" property="deptName" :show-overflow-tooltip="true" ></el-table-column>
      <el-table-column align="center" label="标准类型"  property="standardType"  >
        <template slot-scope="scope" >
          <span v-show="scope.row.standardType=='1'">通用</span>
          <span v-show="scope.row.standardType=='2'">按设备</span>
          <span v-show="scope.row.standardType=='3'">按分类</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="设备分类"  property="deviceTypeName"  ></el-table-column>
      <el-table-column align="center" label="要求"  property="require"  ></el-table-column>
      <el-table-column align="center" label="创建人"  property="userName"  ></el-table-column>
      <el-table-column align="center" label="创建时间"  property="createTime"  ></el-table-column>
      <el-table-column align="center" label="备注"  property="remark"  ></el-table-column>
      <el-table-column
        label="操作"
        align="center"
        width="200">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            icon="el-icon-edit"
            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            icon="el-icon-delete"
            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <inspection-add v-if="isinspecAdd" @subSetChane="addSetChane" :pid="aid"></inspection-add>
    <inspection-des v-if="isinspecDes" @subSetChane="subSetChane" :pid="pid"></inspection-des>
  </div>
</template>

<script>
  import request from '@/utils/request'
  import inspectionAdd from './inspectionBZAdd' 
  import inspectionDes from './inspectionBZXQ'
  export default {
    name: "Role",
    components:{
      inspectionAdd,
      inspectionDes
    },
    data() {
      return {
        //责任人数据
        zrrOptions:[
          { value: '1',label: '张三'},
          { value: '2',label: '李四'},
        ],
        // 遮罩层
        loading: false,
        // 总条数
        total: 0,
        // 角色表格数据
        roleList: [ ],
        // 日期范围
        dateRange: [],
        // 状态数据字典
        statusOptions: [
          { value: '1',label: '通用'},
          { value: '2',label: '按设备'},
          { value: '3',label: '按分类'},
        ],
        // 数据范围选项
        dataScopeOptions: [
          {
            value: "1",
            label: "全部数据权限"
          },
          {
            value: "2",
            label: "自定数据权限"
          },
          {
            value: "3",
            label: "本部门数据权限"
          },
          {
            value: "4",
            label: "本部门及以下数据权限"
          },
          {
            value: "5",
            label: "仅本人数据权限"
          }
        ],
        // 菜单列表
        menuOptions: [],
        // 部门列表
        deptOptions: [],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,

        },
        // 表单参数
        form: {},
        defaultProps: {
          children: "children",
          label: "label"
        },

        isinspecAdd:false,
        aid:null,
        isinspecDes:false,
        pid:null
      };
    },
    created() {
      this.getList()

    },
    methods: {
      //导出
      handleExport: function () {

        var obj = []
        obj = this.roleList
        for(var i=0;i<obj.length;i++){
          if(obj[i].standardType==1){
            obj[i].standardType='通用'
          }
          if(obj[i].standardType==2){
            obj[i].standardType='按设备'
          }
          if(obj[i].standardType==3){
            obj[i].standardType='按分类'
          }
        }
        let sourceOriginAmount = obj; // 需要导出的数据，可以动态获取
        this.loading = true; // 设置一个loading，生成Excel需要时间
        import('@/vendor/Export2Excel.js').then(excel => { // 导入js模块
          const tHeader = ['序号', '标椎编号', '标准名称','适用公司', '标准类型', '设备分类', '要求',  '创建人', '创建时间', '备注']; // 导出excel 的标题
          const filterVal = ['index', 'standardCoder', 'standardName','deptName','standardType','deviceTypeName','require','userName','createTime','remark']; // 每个标题对应的字段

          const list = (sourceOriginAmount || []).map((item, key) => { // 通过 map 方法遍历，组装数据成上面的格式
            return {
              index: key + 1,
              standardCoder: item.standardCoder,
              standardName: item.standardName,
              deptName: item.deptName,
              standardType: item.standardType,
              deviceTypeName: item.deviceTypeName,
              require: item.require,
              userName: item.userName,
              createTime: item.createTime,
              remark: item.remark,
            };
          });

          if (list) {
            const data = this.formatJson(filterVal, list); // 生成json数据
            excel.export_json_to_excel({ // 调用excel方法生成表格
              header: tHeader,
              data,
              filename: this.goodsName
            });
          } else {
            alert('暂无无数据');
          }
          this.getList()

        })
      },
      formatJson(filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => v[j]));
      },
      /** 查询角色列表 */
      getList() {
        this.loading = true;
        request({
          url: '/device/devicePollingStandard/list',
          method: 'get',
          params:this.queryParams
        }).then(response => {
          this.loading = false;
          this.roleList = response.rows
          this.total = response.total
        });
      },
      //导入
      daoru:function(){
        // this.$router.push({path:'/inspectionGL/dome',query:{data:obj}});

      },
      //表格编辑
      handleEdit:function (index,row) {
        // this.$router.push({path:'/inspectionGL/inspectionBZAdd',query:{data:obj}});
        this.aid=row.id
        this.isinspecAdd=true
      },
      //删除
      handleDelete:function (index,row) {
        this.$confirm('确认删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.shanchu(row.id)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      shanchu:function(id){
        request({
          url: '/device/devicePollingStandard/' + id,
          method: 'delete'
        }).then(response => {
          if(response.code=='200'){
            this.$message.success('删除成功')
            this.getList()
          }
        });
      },
      //暂停
      zanding:function(index,row){
        console.log(row)

      },
      //启用
      qiyong:function(index,row){
        console.log(row)
      },
      //采购计划
      cgjhadd:function () {
        console.log('tianjia')
        // this.$router.push({path:'/inspectionGL/inspectionBZAdd',query:{data:obj}});
        this.aid=null
        this.isinspecAdd=true
      },
      addSetChane(info){
        this.isinspecAdd=false
        this.addInfo=null
        if(info) this.getList()
      },
      //详情点击
      xingqing:function (row) {
        console.log(row)
        // this.$router.push({path:'/inspectionGL/inspectionBZXQ',query:{data:row,}});
        this.pid=row.id
        this.isinspecDes=true
      },
      subSetChane(){
        this.isinspecDes=false
        this.pid=null
      }
    }
  };
</script>
